<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .input-number {
        margin-bottom: 20px; /* 输入框与按钮之间的间距 */
      }
      .calculator-button {
        margin-right: 28px; /* 按钮之间的间距 */
        margin-bottom: 20px; /* 按钮与结果输入框之间的间距 */
        width: 35px; /* 按钮宽度 */
        height: 35px; /* 按钮高度 */
        font-size: 20px; /* 按钮内文字大小 */
      }
      #result {
        margin-top: 8px; /* 结果输入框与按钮之间的间距 */
      }
    </style>
</head>
<body>
    第一个数:<input type="number" class="input-number" id="num1"><br/>
    第二个数:<input type="number" class="input-number" id="num2"><br/>
    <button onclick="calculate('+')" class="calculator-button">+</button>
    <button onclick="calculate('-')" class="calculator-button">-</button>
    <button onclick="calculate('*')" class="calculator-button">*</button>
    <button onclick="calculate('/')" class="calculator-button">/</button>
    <br>
    计算结果<input type="text" id="result" readonly>
    <script>
      function calculate(operation) {
        var num1 = parseFloat(document.getElementById('num1').value);
        var num2 = parseFloat(document.getElementById('num2').value);
        var result;
        switch(operation) {
          case '+':
            result = num1 + num2;
            break;
          case '-':
            result = num1 - num2;
            break;
          case '*':
            result = num1 * num2;
            break;
          case '/':
            if(num2 !== 0) {
              result = num1 / num2;
            } else {
              alert("除数不能为0");
              return;
            }
            break;
          default:
            result = "无效操作";
        }
        document.getElementById('result').value = result;
      }
    </script>
</body>
</html>